{% extends "/Wap/layout.html.twig" %}
 {% block body %}
     <div id="Page" class="login">
         <div class="login-title">欢迎登录掌上军师账号</div>
         <div class="forms">
             <div class="forms-item">
                 <input type="text" value="" v-model="username" placeholder="请输入手机号" class="forms-input" placeholder-class="forms-input-text"/>
             </div>
             <div class="forms-item">
                 <input type="password" value="" v-model="password" placeholder="请输入登录密码" class="forms-input" placeholder-class="forms-input-text"/>
             </div>
             <div class="forms-item">
                 <input type="text" value="" v-model="code" placeholder="请输入验证码" class="forms-input-code" placeholder-class="forms-input-text"/>
{#                 <div class="code" @click="sendSms()">[[msg]]</div>#}
                 <div class="code" @click="getCode()"><img :src="picCode" alt=""></div>
                 <!-- <div class="code" v-if="!show">[[count]]s后获取</div> -->
             </div>
         </div>
         <div class="forms-btn" @click="login()">登录</div>
     </div>

 {% endblock %}

{% block js %}
    <script>
        $(function () {
            var Page = createVM("#Page",{
                //页面数据
                form:{}
                ,username:""
                ,password:""
                ,code:""
                ,usernameRules: [
                    { validate: (val) => !!val, message: '必须填写用户名'},
                    { validate: (val) => val.length >= 2, message: '用户名长度大于2'}
                ]
                ,passwordRules: [
                    { validate: (val) => !!val, message: '必须填写密码'},
                    { validate: (val) => val.length >= 3 && val.length <= 24, message: '密码长度大于3小于25'}
                ]
                ,validateForm: {
                    username: '',
                    password: ''
                }
                ,msg:"获取验证码"
                ,cur:0
                ,picCode:""
            },{
                //页面方法
                "init":function () {
                    var _this = this;
                    apiGet("/app/charge/config",{},function (res,code) {
                        console.log(res)
                        _this.getCode()
                    })
                },
                getCode: function () {
                    var _this = this
                    apiGet("/app/imgCode",{},function (res) {
                        console.log(res)
                        _this.picCode = res.data
                    })
                },
                sendSms:function () {
                    if (Page.msg != "获取验证码") {
                        return  false;
                    }
                    var _this = this;
                    var phone = this.username;

                    if (!isTrue(phone)) {
                        showToast('请填写手机号');
                        return false;
                    }
                    if (!checkIsPhone(phone)) {
                        showToast('请检查手机号');
                        return false;
                    }

                    apiGet("/app/login_sms_password",{phone:phone},function (res,HttpCode) {
                        // logJson(res,"/app/send_sms: ")
                        showToast(res.message)
                        console.log(HttpCode)
                        // if (HttpCode == 200) {
                            var int = 0
                            var start = 60
                            int = setInterval(function () {
                                start--
                                Page.msg = start + "s"
                                if (start == 0) {
                                    clearInterval(int)
                                    Page.msg = "获取验证码"
                                }
                            },1000)
                        // }
                    });
                }
                ,login:function(){
                    var _this = this;
                    var phone = this.username;
                    var code = this.code;
                    var password = this.password;
                    if (!isTrue(phone)) {
                        showToast('请填写手机号')
                        return false;
                    }
                    if (!isTrue(code)) {
                        showToast('验证码不能为空')
                        return false;
                    }
                    if (!checkIsPhone(phone)) {
                        showToast('请检查手机号')
                        return false;
                    }

                    apiGet("/app/login_sms_password",{phone:phone,password:password,code:code},function (res,code) {
                        logJson(res,"/app/login_sms_password: ")
                        showToast(res.message)
                        if (code == 200) {
                            setLocData("user",res.data)
                            setLocData("login",1)
                            //设置 auth_token
                            setLocData("auth_token",res.data.ApiToken)
                            // goback()
                            //登陆成功后跳转网页
                            goto("/wap/pay")
                        }
                    });

                }
                ,kbsubmit:function (event) {
                    logJson(event,"event");
                    logJson(event.keyCode,"e")
                    logJson(this.password,"password")
                    if (event.keyCode == 13) {
                        this.login();
                    }
                }
            })
            Page.init()
        })

        function checkIsPhone(val) {
            var myreg = /^[1][3,4,5,6,7,8][0-9]{9}$/;

            if (!myreg.test(val)) {
                return false;
            } else {
                return true;
            }
        }


    </script>

{% endblock %}

    {% block css %}
        <style>
            .abc text{
                color: #007AFF;
                margin-left: 20px;
            }
            .login{
                padding: 10px;


            }
            .forms{
                margin-top: 50px;

            }
            .forms-item{
                margin-bottom: 20px;
                overflow: hidden;

            }
            .forms-input-text{
                color: #d5d5d5;
                font-size: 16px;
            }
            .forms-input{
                background-color: #f8f8f8;
                padding: 10px;
                border-radius: 5px;
                border: 0px;
            }
            .forms-input-code{
                background-color: #f8f8f8;
                padding: 10px;
                border-radius: 5px;
                border: 0px;
                float: left;
                width: 50%;
            }
            .code{
                float: right;
                width: 40%;
                font-size: 14px;
                /*background-color: #30a9ff;*/
                /*color: #fff;*/
                text-align: center;
                padding: 10px 0;
                border-radius: 5px;
            }
            .forms-btn{
                width: 100%;
                text-align: center;
                padding: 10px 0;
                background-color: #30a9ff;
                color: #fff;
                font-size: 16px;
                border-radius: 5px;
                margin-top: 20px;
            }
            .forms-btn:active{
                background-color: #0294fb;
            }
            .forget{
                font-size: 26px;
                text-align: right;
                padding: 10px 0;
            }
            .login-title{
                font-size: 24px;
                font-weight: bold;
                margin-top: 40px;
            }
        </style>

    {% endblock %}